/* eslint-disable @next/next/no-img-element */
import styles from "./style.module.scss";
import * as React from "react";
import { IArticle, IUser } from "../../types";
import IconFont from "../../assets/icon";
import { Button, Input, Menu, Dropdown } from "antd";
import "antd/dist/antd.css";
import { useRouter } from "next/router";
import toast from "../../components/Toast";
import * as articleService from "../../services/article.service";
import Link from "next/link";

const menu = (
  <Menu>
    <Menu.Item>
      <Link href="/me" passHref>
        个人主页
      </Link>
    </Menu.Item>
    <Menu.Item>
      <Link href="/login" passHref>
        切换账号
      </Link>
    </Menu.Item>
  </Menu>
);

interface Props {
  user: IUser;
}

export default function Header(props: Props) {
  const [content, setContent] = React.useState<string>("");
  const [rows, setRows] = React.useState<IArticle[]>([]);
  const router = useRouter();

  const submit = async () => {
    if (content === "") {
      toast("请输入内容");
    } else {
      router.push("/search/" + content);
      const res = await articleService.search(content);
      setRows(res.rows);
    }
  };

  return (
    <div className={styles.header}>
      <Link href={"/"} passHref>
        <div className={styles.logo}>懂乎</div>
      </Link>

      <div className={styles.search}>
        <Input
          className={styles.input}
          placeholder="请输入要搜索的内容"
          allowClear
          width="50px"
          onChange={(e) => {
            setContent(e.target.value);
          }}
          suffix={
            <IconFont
              onClick={submit}
              className={styles.iconsearch}
              type="icon-sousuo"
            />
          }
        />
      </div>
      <Dropdown
        overlay={menu}
        placement="bottomCenter"
        arrow
        className={props.user ? "" : styles.none}
      >
        <IconFont type="icon-chilun--" className={styles.icon} />
      </Dropdown>
      <div className={styles.right}>
        <Button
          onClick={() => router.push("/login")}
          className={props.user ? styles.none : styles.login}
        >
          登录/注册
        </Button>
        <div className={props.user ? styles.user : styles.none}>
          <span className={styles.username}>{props.user?.nickname}</span>
          <div
            style={{
              backgroundImage: `url(/api/article/download/${props.user?.avatar})`,
              height: "30px",
              width: "30px",
              borderRadius: "30px",
              backgroundSize: "cover",
            }}
          ></div>
        </div>
      </div>
    </div>
  );
}
